require(['./config'], () => {
  require(['template', 'swiper', 'jquery', 'header', 'footer'], (template, Swiper) => {
    class Index {
      constructor () {
        this.Init().then(() => {
          this.presentationClick();
          this.slide();  
        })
      }

      Init () {
        return new Promise((resolve) => {
          $.get('https://app2.motie.com/pc/home', { type: 6}, (resp) => {
            let data = resp.data
            $('.presentation').html(template('presentation-template', {
              ul: data.strongPush.templateList
            }))
            $('.img-content').data('index', '1')
            $('.presentation ul').eq($('.img-content').data('index')).addClass('dis');
            $('.img-content').html(template('img-content-template', {
              img: data.strongPush.templateList
            }))
            $('.img-content>div').eq(0).addClass("d1").data('index', '0')
            $('.img-content>div').eq(1).addClass("d2").data('index', '1')
            $('.img-content>div').eq(2).addClass("d3").data('index', '2')

            $('.allImg').html(template('allImg-template', {
              div: data.slide.templateList
            }))

            $('.img-wrap').html(template('img-wrap-template', {
              banner: data.banner1Img.templateList
            }))
            console.log(data.hotRankMale.templateList)
            $('.sell_1').html(template('sell_1-template', {
              lis: data.hotRankMale.templateList
            }))
            $('.sell_2').html(template('sell_1-template', {
              lis: data.pvRankMale.templateList
            }))
            $('.sell_3').html(template('sell_1-template', {
              lis: data.updateRankMale.templateList
            }))
            $('.sell_4').html(template('sell_1-template', {
              lis: data.giveRankMale.templateList
            }))
            $.get('https://app2.motie.com/pc/recentUpdates', { siteType: 6, type: 0}, (resp) => {
              const { data } = resp
              console.log(data)
              $('.item-wrap').html(template('item-wrap-template', {
                data
              }))
              resolve()
            })
          })
        }) 
      }

      presentationClick () {
        // $('.img-content').children().each(function () {
        //   $(this).on('click', function () {
        //     if ($(this).hasClass('d2')) {
        //       location.assign('/')
        //     } else if ($(this).hasClass('d1')) {
        //       $(this).addClass('d2').removeClass('d1')
        //       let d2 = $(this).siblings().not('.d3')
        //       let d3 = $(this).siblings().not('.d2')
        //       d2.removeClass('d2').addClass('d3')
        //       d3.removeClass('d3').addClass('d1')
        //       $('.presentation ul').eq($('.img-content').data('index')).removeClass('dis');
        //       $(this).parent().data('index', $(this).data('index'))
        //       $('.presentation ul').eq($('.img-content').data('index')).addClass('dis');
        //     } else if ($(this).hasClass('d3')) {
        //       $(this).removeClass('d3').addClass('d2')
        //       let t1 = $(this).siblings().not(".d2")
        //       let t2 = $(this).siblings().not('.d1')
        //       t1.removeClass('d1').addClass('d3')
        //       t2.removeClass('d2').addClass('d1')
        //       $('.presentation ul').eq($('.img-content').data('index')).removeClass('dis');
        //       $(this).parent().data('index', $(this).data('index'))
        //       $('.presentation ul').eq($('.img-content').data('index')).addClass('dis');
        //     }
        //   }) 
        // })
        $('.img-content').children().on('click', function () {
          if ($(this).hasClass('d2')) {
            location.assign('/')
          } else if ($(this).hasClass('d1')) {
            $(this).addClass('d2').removeClass('d1')
            let d2 = $(this).siblings().not('.d3')
            let d3 = $(this).siblings().not('.d2')
            d2.removeClass('d2').addClass('d3')
            d3.removeClass('d3').addClass('d1')
            $('.presentation ul').eq($('.img-content').data('index')).removeClass('dis');
            $(this).parent().data('index', $(this).data('index'))
            $('.presentation ul').eq($('.img-content').data('index')).addClass('dis');
          } else if ($(this).hasClass('d3')) {
            $(this).removeClass('d3').addClass('d2')
            let t1 = $(this).siblings().not(".d2")
            let t2 = $(this).siblings().not('.d1')
            t1.removeClass('d1').addClass('d3')
            t2.removeClass('d2').addClass('d1')
            $('.presentation ul').eq($('.img-content').data('index')).removeClass('dis');
            $(this).parent().data('index', $(this).data('index'))
            $('.presentation ul').eq($('.img-content').data('index')).addClass('dis');
          }
        })
      }

      slide () {
        var mySwiper = new Swiper ('.swiper-container', {
          loop: true, // 循环模式选项
          // 如果需要分页器
          autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
          },
          pagination: {
            el: '.swiper-pagination',
          },
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          // 如果需要滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
          },
        })  
      }

    }
    new Index();
  });
})

